import React from "react";

const Stack = ({
  orientation = "vertical",
  alignItems = "start",
  justifyContent = "start",
  gap = "8",
  flexWrap = "nowrap",
  // border = "1px dashed rgba(255, 0, 0, 0.5)",
  width,
  height,
  className,
  children,
  alignSelf,
}) => {
  let currentOrientation;
  if (orientation === "vertical") {
    currentOrientation = "column";
  } else if (orientation === "horizontal") {
    currentOrientation = "row";
  }
  return (
    <div
      className={className !== undefined && `${className}`}
      style={{
        display: "flex",
        flexDirection: currentOrientation,
        alignItems: alignItems,
        justifyContent: justifyContent,
        gap: `var(--mp-size-${gap})`,
        flexWrap: flexWrap,
        // border: border,
        width: width,
        height: height,
        alignSelf: alignSelf,
      }}
    >
      {children}
    </div>
  );
};

export default Stack;
